<template>
  <div
    class="setting-container"
    ref="settingMainRef"
    @scroll="handleScroll"
  >
    <div class="setting-tabs-wrap">
      <el-tabs
        v-model="activeName"
        class="setting-tabs t-tabs"
        tab-position="left"
        @tab-change="handleTabChange"
        ref="tabElRef"
      >
        <el-tab-pane
          :label="$t('form.leftTab.publicRelease')"
          name="publicPublish"
          v-if="hasFormButtonAuth('publicPublish')"
        >
          <template #label>
            <el-icon size="22">
              <TablerLocationShare />
            </el-icon>
            {{ $t("form.leftTab.publicRelease") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('form.leftTab.publicQuery')"
          name="publicQuery"
          v-if="hasFormButtonAuth('publicQuery')"
        >
          <template #label>
            <el-icon size="22">
              <TablerListSearch />
            </el-icon>
            {{ $t("form.leftTab.publicQuery") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('form.leftTab.specifyFill')"
          name="targetedPublish"
          v-if="hasFormButtonAuth('targetedPublish')"
        >
          <template #label>
            <el-icon size="22">
              <TablerUserShare />
            </el-icon>
            {{ $t("form.leftTab.specifyFill") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('form.leftTab.dataView')"
          name="authGroup"
          v-if="hasFormButtonAuth('authGroup')"
        >
          <template #label>
            <el-icon size="22">
              <TablerTableShortcut />
            </el-icon>
            {{ $t("form.leftTab.dataView") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('form.leftTab.dataPush')"
          name="dataPush"
          v-if="hasFormButtonAuth('dataPush')"
        >
          <template #label>
            <el-icon size="22">
              <TablerDatabaseShare />
            </el-icon>
            {{ $t("form.leftTab.dataPush") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('form.leftTab.dataAssistant')"
          name="dataHelper"
          v-if="hasFormButtonAuth('dataHelper')"
        >
          <template #label>
            <el-icon size="22">
              <TablerEyeTable />
            </el-icon>
            {{ $t("form.leftTab.dataAssistant") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('form.leftTab.notifyShare')"
          name="notifyShare"
          v-if="hasFormButtonAuth('notifyShare')"
        >
          <template #label>
            <el-icon size="22">
              <TablerMessage2Share />
            </el-icon>
            {{ $t("form.leftTab.notifyShare") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          v-if="hasFormButtonAuth('lottery')"
          :label="$t('form.leftTab.lottery')"
          name="lottery"
        >
          <template #label>
            <el-icon size="22">
              <TablerGift />
            </el-icon>
            {{ $t("form.leftTab.lottery") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          v-if="hasFormButtonAuth('printTemplate')"
          name="printTemplate"
        >
          <template #label>
            <el-icon size="22">
              <TablerFileExport />
            </el-icon>
            {{ $t("form.leftTab.printTemplate") }}
          </template>
        </el-tab-pane>
        <el-tab-pane
          v-if="hasFormButtonAuth('certificateGen')"
          name="certificateGen"
        >
          <template #label>
            <el-icon size="22">
              <TablerFileCertificate />
            </el-icon>
            {{ $t("form.leftTab.certificateGen") }}
          </template>
        </el-tab-pane>
      </el-tabs>
      <div
        class="content-wrap"
        :style="{ marginLeft: tabWidth + 'px' }"
      >
        <public-publish
          :ref="(el: any) => (settingRefs['publicPublish'] = el)"
          v-if="hasFormButtonAuth('publicPublish')"
          class="mt20"
        />
        <public-query
          :ref="(el: any) => (settingRefs['publicQuery'] = el)"
          v-if="hasFormButtonAuth('publicQuery')"
          class="mt20"
        />
        <targeted-publish
          :ref="(el: any) => (settingRefs['targetedPublish'] = el)"
          v-if="hasFormButtonAuth('targetedPublish')"
          class="mt20"
        />
        <auth-group
          :ref="(el: any) => (settingRefs['authGroup'] = el)"
          v-if="hasFormButtonAuth('authGroup')"
          class="mt20"
        />
        <data-push
          :ref="(el: any) => (settingRefs['dataPush'] = el)"
          v-if="hasFormButtonAuth('dataPush')"
          class="mt20"
        />
        <data-helper
          :ref="(el: any) => (settingRefs['dataHelper'] = el)"
          v-if="hasFormButtonAuth('dataHelper')"
          class="mt20"
        />
        <notify-share
          :ref="(el: any) => (settingRefs['notifyShare'] = el)"
          v-if="hasFormButtonAuth('notifyShare')"
          class="mt20"
        />
        <form-lottery
          :ref="(el: any) => (settingRefs['lottery'] = el)"
          v-if="hasFormButtonAuth('lottery')"
          class="mt20"
        />
        <print-template
          :ref="(el: any) => (settingRefs['printTemplate'] = el)"
          v-if="hasFormButtonAuth('printTemplate')"
          class="mt20"
        />
        <certificate-gen
          :ref="(el: any) => (settingRefs['certificateGen'] = el)"
          v-if="hasFormButtonAuth('certificateGen')"
          class="mt20"
        />
      </div>
    </div>
  </div>
</template>

<script name="PublishTabs" setup lang="ts">
import { onMounted, ref } from "vue";
import { useFormInfo } from "@/stores/formInfo";
import publicPublish from "./public.vue";
import PublicQuery from "./PublicQuery.vue";
import { loadAsyncComponent } from "@/utils/asyncComponent";
import { useDebounceFn, useElementSize } from "@vueuse/core";

import TablerLocationShare from "~icons/tabler/location-share";
import TablerListSearch from "~icons/tabler/list-search";
import TablerUserShare from "~icons/tabler/user-share";
import TablerTableShortcut from "~icons/tabler/table-shortcut";
import TablerDatabaseShare from "~icons/tabler/database-share";
import TablerMessage2Share from "~icons/tabler/message-2-share";
import TablerGift from "~icons/tabler/gift";
import TablerFileExport from "~icons/tabler/file-export";
import TablerFileCertificate from "~icons/tabler/file-certificate";
import TablerEyeTable from "~icons/tabler/eye-table";
const AuthGroup = loadAsyncComponent(() => import("./AuthGroup.vue"));
const TargetedPublish = loadAsyncComponent(() => import("./TargetedPublish.vue"));
const DataPush = loadAsyncComponent(() => import("./DataPush.vue"));
const DataHelper = loadAsyncComponent(() => import("./DataHelper/index.vue"));
const NotifyShare = loadAsyncComponent(() => import("./NotifyShare/index.vue"));
const PrintTemplate = loadAsyncComponent(() => import("./PrintTemplate/index.vue"));
const CertificateGen = loadAsyncComponent(() => import("./CertificateGen/index.vue"));
const FormLottery = loadAsyncComponent(() => import("./Lottery/index.vue"));

const activeName = ref("publicPublish");

onMounted(() => {});

const { hasFormButtonAuth } = useFormInfo();

const settingRefs = ref<any>({});

const tabElRef = ref(null);
const { width: tabWidth } = useElementSize(tabElRef);

const handleTabChange = (name: string) => {
  console.log(name);
  console.log(settingRefs.value[name]);
  settingRefs.value[name].$el.scrollIntoView({ behavior: "smooth", block: "start" });
};

const handleScroll = useDebounceFn(() => {
  console.log(getCurrentScrollDom());
  activeName.value = getCurrentScrollDom();
}, 300);

const settingMainRef = ref<HTMLDivElement | null>(null);

// 获取当前滚动到那个区域
const getCurrentScrollDom = () => {
  const current = settingMainRef.value!.scrollTop + 20; // 获取当前滚动条离顶部高度
  let currentTab = "";
  let maxTop = 0;
  for (let key of Object.keys(settingRefs.value)) {
    const top = settingRefs.value[key].$el.offsetTop;
    if (current + 200 > top && top > maxTop) {
      currentTab = key;
      maxTop = top;
    }
  }
  return currentTab;
};
</script>

<style lang="scss" scoped>
.setting-container {
  height: calc(100vh - 46px);
  background-color: var(--el-bg-color-page);
  overflow: auto;
  position: relative;
  z-index: 10;
  width: 100%;

  .setting-tabs-wrap {
    margin: 0 auto;
    width: 980px;
  }

  .setting-tabs {
    border-radius: 8px;
    margin-top: 20px;
    min-height: 500px;
    position: fixed;
    top: 66px;
    z-index: 10;
    --el-color-primary-light-9: var(--el-bg-color-page);
    :deep(.el-tabs__item.is-active) {
      color: var(--el-text-color-primary);
    }
  }
  .content-wrap {
    width: 780px;
    padding-top: 20px;
    padding-bottom: 100px;
  }
}
:deep(.el-tabs__item) {
  justify-content: left !important;
}
</style>
